<template>
  <view class="component-box" :style="[outModuleCss]">
    <div
      class="swiper-section"
      :style="{
        borderRadius: swiperType == 1 ? outModuleCss.borderRadius : '',
        padding: swiperType == 2 || swiperType == 4 ? '0' : '0 2.67%'
      }"
    >
      <view :style="[moduleBgNoCalcCss]" class="module-bg"></view>
      <u-swiper
        :list="bannerList"
        mode="rect"
        :indicator-pos="dotsPosition"
        :effect3d="useEffect3d"
        :bg-color="swiperBg"
        :height="swiperHeight"
        @click="handleImgItem"
      ></u-swiper>
    </div>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  mixins: [diyMixin], //混入文件
  watch: {
    propsData: {
      handler() {
        uni.$emit("swiperType", { val: this.propsData.params.swiperType });
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    swiperType() {
      return this.propsData.params.swiperType;
    },
    swiperBg() {
      let style = Object.assign({}, this.propsData.moduleCss);
      return style.backgroundColor || "";
    },
    bannerList() {
      this.propsData.params.bannerList.forEach((d) => {
        d["image"] = d.picUrl;
      });
      return this.propsData.params.bannerList;
    },
    dotsPosition() {
      let dots = "bottomCenter";
      if (this.propsData.params.dotsPosition == "left") dots = "bottomLeft";
      if (this.propsData.params.dotsPosition == "center") dots = "bottomCenter";
      if (this.propsData.params.dotsPosition == "right") dots = "bottomRight";
      return dots;
    },
    useEffect3d() {
      return this.swiperType == "3";
    },
    swiperHeight() {
      if (this.propsData.params.swiperType == 4) {
        return this.propsData.params.swiperHeight || "450";
      }
      return this.propsData.params.swiperHeight || "250";
    }
  },
  mounted() {},
  methods: {
    // 点击图片
    handleImgItem(e) {
      let item = this.bannerList[e];
      let link = item.link;
      this.$utils.diySkip(link);
    }
  },
  filters: {}
};
</script>

<style scoped lang="scss">
.component-box {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .swiper-section {
    width: 100%;
    overflow: hidden;
    position: relative;
    .u-swiper-wrap {
      background-color: inherit;
    }
  }
  .swiper-padding {
    width: 93.6vw;
  }
}
</style>
